import React from 'react'
import {Route} from 'react-router-dom'
import News from '../News'
import Index from '../Index'
import HouseList from '../HouseList'
import Profile from '../Profile'
// import Login from '../login'

/*
    1 在 pages 文件夹中创建 News/index.js 组件
    2 在 Home 组件中，添加一个 Route 作为子路由(嵌套路由)的出口
    3 设置嵌套路由的 path,格式以父路由 path 开头(父组件展示，子组件才会展示)
*/
import { TabBar } from 'antd-mobile';

// 导入组件自己的样式文件
import './index.css'

// TabBar数据
const tabItems = [
  {
    title:'首页',
    icon:'icon-ind',
    path:'/home'
  },
  {
    title:'找房',
    icon:'icon-findHouse',
    path:'/home/list'
  },
  {
    title:'咨询',
    icon:'icon-infom',
    path:'/home/news'
  },
  {
    title:'我的',
    icon:'icon-my',
    path:'/home/profile'
  }
]

/*
  问题：点击首页导航菜单，导航到 找房列表 页面时，找房菜单没有高亮
  原因：实现该功能时，只考虑点击第一次加载Home组件情况
  解决：
      思路：在路由切换时，也执行菜单高亮的逻辑代码
      1、添加componentDidUpdate钩子函数
      2、在钩子函数中判断路由地址是否切换(因为路由的信息是通过props传递给组件的，所以通过比较更新前后的两个props)
      3、在路由地址切换时，让菜单高亮
*/
export default class Home extends React.Component {
    state = {
        // 默认选中的TabBar菜单项
        selectedTab: this.props.location.pathname
    };

    componentDidUpdate(prevProps) {
      console.log('上次的路由信息',prevProps)
      console.log('上次的路由信息',this.props)

      if(prevProps.location.pathname !== this.props.location.pathname) {
        // 此时说明路由发生切换了
        // this.setState({
        //   selectedTab: this.props.location.pathname
        // })
      }
    }

    // 渲染TabBar.Item
    renderTabBarItem() {
      return tabItems.map(item => <TabBar.Item
            title={item.title}
            key={item.title}
            icon={<i className={`iconfont ${item.icon}`} />}
            selectedIcon={<i className={`iconfont ${item.icon}`} />}
            selected={this.state.selectedTab === item.path}
            onPress={() => {
              this.setState({
                selectedTab: item.path,
              })

              // 路由切换
              this.props.history.push(item.path)
            }}
          >
        </TabBar.Item>
      )
    }

    render() {
        return <div className="home">
            {/* 2.3 渲染子路由 */}
            <Route path="/home/news" component={News}></Route>
            <Route exact path="/home" component={Index}></Route>
            <Route path="/home/list" component={HouseList}></Route>
            <Route path="/home/profile" component={Profile}></Route>
            {/* <Route path="/login" component={Login}></Route> */}
            
            {/* TabBar */}
        <TabBar tintColor="#21b97a" noRenderContent={true} barTintColor="white">
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    }
}